<template>
  <el-dialog
    v-model="dialogVisible"
    width="400px"
    style="
      background: #222222;
      border-radius: 9px;
      border: 1px solid rgba(255, 255, 255, 0.5);
      padding: 0;
    "
    :modal="false"
    :before-close="close"
    align-center
    @close="close"
  >
    <template #header>
      <div class="title unselectable">守护主播</div>
    </template>
    <template #default>
      <div class="dialog-content">
        <div class="top-btn" @click="viewGuardian = true">查看守护榜</div>
        <img class="middle" src="@/assets/live/room/guardianCrystal.svg" />
        <div style="font-size: 16px">守护水晶</div>
        <div class="btns">
          <span
            class="subtract unselectable"
            @click="
              () => {
                if (num === 0) return;
                num--;
              }
            "
          >
            -
          </span>
          <span style="margin: 0 20px">{{ num }}</span>
          <span class="add unselectable" @click="num++">+</span>
        </div>
      </div>
      <div class="footer-btns">
        <img :src="iconImg" class="icon" />
        <span>19600</span>
        <span class="btn small unselectable" @click="rechargeDialogRef.show()">+充值</span>
        <span style="flex: 1"></span>
        <span>共13322</span>
        <img :src="iconImg" class="icon" />
        <span class="btn large unselectable">守护主播</span>
      </div>
    </template>
  </el-dialog>
  <RechargeDialog ref="rechargeDialogRef" />
  <GuardianList v-model="viewGuardian" />
</template>
<script lang="ts" setup>
import { ref } from "vue";
import iconImg from "@/assets/live/room/crystal.svg";
import RechargeDialog from "./RechargeDialog.vue";
import GuardianList from "./dialog/GuardianList.vue";
const dialogVisible = ref(false);
const num = ref(0);
const rechargeDialogRef = ref();
const viewGuardian = ref(false);
// 显示
const show = () => {
  dialogVisible.value = true;
};

// 关闭前的回调
const close = () => {
  dialogVisible.value = false;
};
// const handleSubmit = () => {
//   emit("submit", inputValue.value);
// };

defineExpose({ show, close });
</script>
<style lang="scss" scoped>
.title {
  padding: 15px 32px 0px;
  font-size: 16px;
  color: #fff;
}
.dialog-content {
  border-top: 1px solid rgba(216, 216, 216, 0.5);
  border-bottom: 1px solid rgba(216, 216, 216, 0.5);
  padding: 20px 20px 8px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  .top-btn {
    width: auto;
    background-color: #7fb1ff;
    border-radius: 12px;
    padding: 2px 8px;
    align-self: flex-start;
    cursor: default;
  }
  .middle {
    width: 165px;
    height: 144px;
    margin: 8px 0 24px;
  }
  .btns {
    display: flex;
    margin-top: 16px;
    .add,
    .subtract {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      background-color: #fff;
      color: #100e1b;
      font-size: 20px;
      text-align: center;
      line-height: 24px;
      cursor: default;
    }
  }
}
.footer-btns {
  padding: 16px 14px 36px;
  display: flex;
  align-items: center;
  color: #fff;
  .icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
  }
  .btn {
    background-image: url("@/assets/live/gradientButton.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: default;
  }
  .small {
    font-size: 11px;
    padding: 5px 10px;
    margin-left: 7px;
  }
  .large {
    padding: 5px 17px;
    margin-right: 0;
  }
}
</style>
